<template>
  <div class="user-role-info">
    <el-card class="role-card">
      <template #header>
        <div class="card-header">
          <span>用户角色信息</span>
        </div>
      </template>
      
      <div class="role-content">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="用户名">
            {{ userInfo.username }}
          </el-descriptions-item>
          <el-descriptions-item label="用户ID">
            {{ userInfo.id }}
          </el-descriptions-item>
          <el-descriptions-item label="用户类型">
            <el-tag :type="userInfo.isAdmin ? 'danger' : 'success'">
              {{ userInfo.isAdmin ? '管理员' : '普通用户' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="角色列表">
            <el-space wrap>
              <el-tag 
                v-for="role in userInfo.roles" 
                :key="role" 
                :type="getRoleType(role)"
              >
                {{ formatRoleName(role) }}
              </el-tag>
            </el-space>
          </el-descriptions-item>
        </el-descriptions>
        
        <div class="role-actions" v-if="userInfo.isAdmin">
          <el-alert
            title="您拥有管理员权限，可以访问所有系统管理功能"
            type="success"
            show-icon
            :closable="false"
          />
        </div>
        
        <div class="role-actions" v-else>
          <el-alert
            title="您是普通用户，只能访问部分功能"
            type="info"
            show-icon
            :closable="false"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getUserInfo } from '@/api/auth'

const userInfo = ref({
  id: '',
  username: '',
  roles: [],
  isAdmin: false
})

// 根据角色名称返回标签类型
const getRoleType = (role) => {
  if (role.includes('admin') || role.includes('ADMIN')) {
    return 'danger' // 管理员角色用红色标签
  } else if (role.includes('manager') || role.includes('MANAGER')) {
    return 'warning' // 经理角色用橙色标签
  } else {
    return 'info' // 其他角色用灰色标签
  }
}

// 格式化角色名称显示
const formatRoleName = (role) => {
  const roleMap = {
    'admin:all': '系统管理员',
    'ROLE_ADMIN': '管理员',
    'ROLE_MANAGER': '经理',
    'ROLE_WAITER': '服务员',
    'ROLE_CHEF': '厨师',
    'ROLE_CASHIER': '收银员'
  }
  
  return roleMap[role] || role
}

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const response = await getUserInfo()
    if (response.code === 200) {
      userInfo.value = {
        id: response.data.id,
        username: response.data.username,
        roles: response.data.roles || [],
        isAdmin: response.data.isAdmin || false
      }
    }
  } catch (err) {
    console.error('获取用户信息失败:', err)
  }
}

onMounted(() => {
  fetchUserInfo()
})
</script>

<style scoped>
.user-role-info {
  max-width: 800px;
  margin: 0 auto;
}

.role-card {
  margin-bottom: 20px;
}

.card-header {
  font-weight: bold;
  font-size: 18px;
}

.role-content {
  padding: 20px 0;
}

.role-actions {
  margin-top: 20px;
}
</style>